<template>
  <div class="absolute left-1/2 bottom-10" style="z-index: 999; transform: translate(-50%, -50%)">
    <button class="button" data-text="Awesome" @click="open()">
      <span class="actual-text">&nbsp;NOTE&nbsp;PAD&nbsp;</span>
      <span aria-hidden="true" class="hover-text">&nbsp;NOTE&nbsp;PAD&nbsp;</span>
    </button>
  </div>
  <el-drawer v-model="drawer" title="I am the title" size="40%" :with-header="false" custom-class="bg-black"
    @open="opendarwer()">
    <div class="mt-10"></div>
    <div id="vditor" ref="vditor"></div>
  </el-drawer>
</template>

<script setup>

import { useUserStore } from '@/stores/userinfo';
import hljs from 'highlight.js';
import 'highlight.js/lib/common';
import 'highlight.js/styles/atom-one-dark.min.css';

import { onMounted, ref } from 'vue';


// 1.1 引入Vditor 构造函数
import Vditor from 'vditor';
// 1.2 引入样式
import 'vditor/dist/index.css';
const drawer = ref(false);
const contentEditor = ref('');
function opendarwer() {
  contentEditor.value = new Vditor('vditor', {
    "height": 660,

    theme: 'dark',
    "cache": {
      "enable": false
    },
    "mode": "wysiwyg"

  })
}

const { proxy } = getCurrentInstance();

function formatDate(dateString) {
  return proxy.$moment(dateString).format('yyyy-MM-DD HH:mm:ss');
}

function open() {


  drawer.value = true;
}
</script>
<style>
.el-drawer__body {
  background-color: #000;
}

.vditor-reset {
  color: #fff !important;
}

.hljs {
  font-size: 10px;
  color: #abb2bf !important;
  word-wrap: break-word !important;
  background: transparent !important;
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
  color: #c678dd !important;
}

.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: #98c379 !important;
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
  color: #61aeee !important;
}

/* === removing default button style === */
.button {
  z-index: 99999;
  height: auto;
  padding: 0;
  margin: 0;
  font-family: Arial;
  font-size: var(--fs-size);
  color: transparent;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
  background: transparent;
  border: none;
  -webkit-text-stroke: 1px var(--text-stroke-color);

  --border-right: 6px;
  --text-stroke-color: rgb(255 255 255 / 60%);
  --animation-color: #37ff8b;
  --fs-size: 1em;
}

/* this is the text, when you hover on button */
.hover-text {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 0%;
  overflow: hidden;
  color: var(--animation-color);
  content: attr(data-text);
  border-right: var(--border-right) solid var(--animation-color);
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}

/* hover */
.button:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color));
}
</style>
<style scoped lang="less"></style>
